<template>
  <div class="page-container page-container-create">
     <!-- 面包屑部分 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>自动化营销</el-breadcrumb-item>
        <el-breadcrumb-item>用户旅程管理</el-breadcrumb-item>
        <el-breadcrumb-item>创建用户旅程</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <p class="font18 mb20 mt30">创建用户旅程</p>
    <!-----------------------------------------------步骤条-------------------------------------------------->
    <div class="stepset stepset3 mb60">
      <ul>
        <li :class="{'active':active>=1}">
          <span>1</span>
          <p>设置旅程规则</p>
        </li>
        <li :class="{'active':active>=2}">
          <span>2</span>
          <p>设计流程</p>
        </li>
        <li :class="{'active':active>=3}">
          <span>3</span>
          <p>创建成功</p>
        </li>
      </ul>
    </div>
    <!--------------------------------------------状态信息------------------------------------------------------>
    <div class="tab-success createSet tab-container">
      <div class="titleInfo">
        <img src="/static/images/success.png" />
        <span v-if="saveType=='true'" class="font20">旅程创建成功</span>
        <span v-else class=" font20">旅程保存草稿成功</span>
      </div>
    <!--------------------------------------------底部按钮------------------------------------------------------->
    <el-row>
      <el-button class="searchButton mr60" @click="back">确定</el-button>
      <el-button class="searchButton" @click="back">返回旅程列表</el-button>
    </el-row>
    </div>
  </div>
</template>
<script>
// 自动化营销----------创建用户旅程第三步：创建完成

export default {
  name: 'stepThree',
  components: {

  },
  computed: {
    mainTabs: {
      get() {
        return this.$store.state.tab.mainTabs;
      },
      set(val) {
        this.$store.commit("updateMainTabs", val);
      }
    },
    mainTabsActiveName: {
      get() {
        return this.$store.state.tab.mainTabsActiveName;
      },
      set(val) {
        this.$store.commit("updateMainTabsActiveName", val);
      }
    }
  },
  data() {
    return {
      active: 3,               // 当前创建旅程步骤
      saveType: false,         // 上个页面数据保存状态，  true----提交保存    false-----保存草稿
    }

  },

  methods: {
    // tabs, 删除tab
    removeTabHandle(tabName) {
      this.mainTabs = this.mainTabs.filter(item => item.name !== tabName);
      if (this.mainTabs.length >= 1) {
        // 当前选中tab被删除
        if (tabName === this.mainTabsActiveName) {
          this.$router.push(
            { path: '/Pages/AutoMarket/UserJourneyManagement/UserJourneyManagement'},() => {
              this.mainTabsActiveName = this.$route.name;
            }
          );
        }
      } else {
        this.$router.push(
          { path: '/Pages/AutoMarket/UserJourneyManagement/UserJourneyManagement'},() => {
            this.mainTabsActiveName = this.$route.name;
          }
        );
      }
    },
    back(){
      this.removeTabHandle(this.mainTabsActiveName);
    }
  },

  mounted() {
    this.removeTabHandle("创建用户旅程二");
    // 获取创建旅程第二部返回的保存类型， true---提交保存    false-----草稿
    if(this.$route.query.type) {
      this.saveType = this.$route.query.type;
       
    }
  },
}
</script>
<style lang="scss" scoped>
@import '../../../../assets/css/public.scss';
  .font18{
    font-size: 18px;
  }
</style>

